<!--
 @description 近30天已配车
 @fileName ThirtyDayCareChart.vue
 @author zengqiongying
 @created 2021/05/21 16:26:05
-->
<template>
  <div>
    <div :id="chartId" ref="myEchart" class="echart_container" />
  </div>
</template>

<script>
import ChartLineMixin from '@/mixins/ChartLine'
import { parseTime } from '@/utils'
import { getOfficeCareQuantityCurrentMonth } from '@/apis/logistics'
export default {
  name: 'MonthCareChart',
  mixins: [ChartLineMixin],
  data() {
    return {
      provinceName: this.$route.query.provinceName || '',
      officeName: this.$route.query.officeName || '',
      // legendData: ['当月累计', '每日新增'] // 图列数据
      legendData: ['每日新增'] // 图列数据
    }
  },
  created() {
    const day = new Date().getDate()
    const xAxis = this.echartOption.xAxis
    xAxis.axisLabel.showMinLabel = true
    xAxis.axisLabel.showMaxLabel = true
    xAxis.axisLabel.interval = day < 16 ? 0 : 1
    xAxis.axisLabel.rotate = 40 // X轴字体倾斜40度
    xAxis.axisLabel.fontSize = 10 // 字体大小
    this.$set(this.echartOption, 'xAxis', xAxis)
    const grid = this.echartOption.grid
    grid.left = 15
    grid.right = 10
    this.$set(this.echartOption, 'grid', grid)
    this.echartOption.series.forEach(item => {
      item.symbolSize = 4
      item.showSymbol = true
      item.lineStyle.width = 2
    })
  },
  methods: {
    async getChartData() {
      const xAxisData = []
      const monthData = []
      const dayData = []
      /* for (let i = 1; i <= 31; i++) {
        xAxisData.push(`05.${i < 10 ? '0' + i : i}`)
        data1.push(this.getRandom(i + 500, 2000))
        data2.push(this.getRandom(i, 500))
      } */
      await getOfficeCareQuantityCurrentMonth(this.officeName).then(res => {
        if (res.data && res.data.length) {
          res.data.forEach(v => {
            xAxisData.push(parseTime(v.date, '{m}.{d}'))
            monthData.push(Number(v.monthCareQuantity || 0))
            dayData.push(Number(v.careQuantity || 0))
          })
        }
      })
      this.chart.chartData = {
        xAxisData,
        // seriesData: [monthData, dayData]
        seriesData: [dayData]
      }
    },
    getRandom(min, max) {
      return Math.floor(Math.random() * (max - min)) + min
    }
  }
}

</script>
<style lang='less' scoped>
  .echart_container{
    height:260px
  }
</style>
